<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<view class="go_reg">还没有账号？<navigator url="/pages/public/register" hover-class="none">立即注册</navigator>
			</view>
		</view>
		<view class="container">
			<view class="flex-box flex-center tab_con">
				<view :class="[nav==0?'active':'']" @click="tab(0)">手机号登录</view>
				<view :class="[nav==1?'active':'']" @click="tab(1)">密码登录</view>
			</view>
			<form class="reg_main" @submit="mobileLogin" v-if="nav==0">
				<view class="reg_item">
					<input type="number" placeholder="输入手机号" name="mobile" @input="inputMobile"
						placeholder-class="cold7" class="flex-grow-1" value="" />
				</view>
				<view class="reg_item flex-box">
					<input type="number" placeholder="输入验证码" name="captcha" placeholder-class="cold7"
						class="flex-grow-1" value="" />
					<button hover-class="none" class="send_btn"
						@click="sendCaptcha">{{countdown>0?'重新发送('+countdown+')':'获取验证码'}}</button>
				</view>
				<view class="tr">
					<navigator url="/pages/public/forget" class="fs24 col9" hover-class="none">忘记密码？</navigator>
				</view>
				<button formType="submit" hover-class="none" class="btn1 mt50">立即登录</button>
			</form>

			<form class="reg_main" @submit="emailLogin" v-if="nav==1">
				<view class="reg_item">
					<input type="text" name="account" placeholder="输入手机号或用户名或邮箱" placeholder-class="cold7"
						class="flex-grow-1" value="" />
				</view>
				<view class="reg_item flex-box">
					<input type="password" name="password" placeholder="输入密码" placeholder-class="cold7"
						class="flex-grow-1" value="" />
				</view>
				<view class="tr">
					<navigator url="/pages/public/forget" class="fs24 col9" hover-class="none">忘记密码？</navigator>
				</view>
				<button formType="submit" hover-class="none" class="btn1 mt50">立即登录</button>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {

				nav: 0,
				wx_account: null,
				countdown: 0,
				mobile: '',
				isLogin: true
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			page.isLogin = this.$core.getUserinfo() ? true : false
			uni.$on(app.globalData.Events.WxAccountUpdate, page.eventOnWxAccountUpdate, page);
		},
		onUnload: function() {
			uni.$off(app.globalData.Events.WxAccountUpdate, this.eventOnWxAccountUpdate);
		},
		methods: {
			tab(i) {
				this.nav = i
			},
			inputMobile(event) {
				this.mobile = event.detail.value
			},
			sendCaptcha: function() {
				let page = this;
				if (page.countdown > 0) {
					return;
				}
				let mobile = this.mobile;
				if (mobile.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				page.$core.post({
					url: '/xilujob.sms/send',
					data: {
						mobile: mobile,
						event: 'mobilelogin'
					},
					success(ret, response) {
						page.countdown = 60
						let timer = setInterval(function() {
							let tick = page.countdown - 1;
							page.countdown = tick
							if (tick <= 0) {
								clearInterval(timer);
							}
						}, 1000);
					}
				});
			},
			mobileLogin(event) {
				let data = event.detail.value;
				let recom_pid = uni.getStorageSync('recom_pid') || '';
				let recom_group = uni.getStorageSync('recom_group') || '';
				if (recom_pid) {
					data['pid'] = recom_pid;
					data['first_group_id'] = recom_group;
				}
				console.log(data);
				var rule = [{
					name: 'mobile',
					rules: ['require', 'mobile'],
					errorMsg: {
						require: '请输入手机号',
						mobile: '请填写正确的手机号'
					}

				}, {
					name: 'captcha',
					rules: ['require', 'length:4'],
					errorMsg: {
						require: '请输入验证码',
						length: '请输入正确的验证码'
					}
				}, ];
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.$core.post({
					url: '/xilujob.user/mobilelogin',
					data: data,
					success: (ret, response) => {
						this._loginSuccess(ret.data.userinfo);
					}
				});
			},
			emailLogin(event) {
				let page = this;
				let data = event.detail.value;
				var rule = [{
					name: 'account',
					rules: ['require'],
					errorMsg: {
						require: '请输入用户名或邮箱'
					}
				}, {
					name: 'password',
					rules: ['require', 'length:3,20'],
					errorMsg: {
						require: '请输入密码',
						length: '密码最少3位，最多20位'
					}
				}, ];

				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.$core.post({
					url: '/xilujob.user/login',
					data: data,
					success(ret, response) {
						page._loginSuccess(ret.data.userinfo);
					}
				});
			},
			_loginSuccess(userinfo) {
				getApp().globalData.userinfo = userinfo;
				this.$core.setUserinfo(userinfo);
				this.$chatIM.connectSocket();
				if (userinfo.group_id == 1 || userinfo.group_model.audit_status == 1) {
					if (getCurrentPages().length === 1) {
						uni.switchTab({
							url: '/pages/public/index'
						});
					} else {
						wx.navigateBack({
							delta: 2
						});
					}
				} else {
					wx.reLaunch({
						url: '/pages/company/improve_corporate_information'
					});
				}
				uni.$emit(app.globalData.Events.UserLogin, userinfo);
			},
			eventOnWxAccountUpdate: function(wxAccount) {
				this.wx_account = wxAccount
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 36rpx;
	}

	.heaeder {
		width: 144rpx;
		height: 144rpx;
		display: block;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto
	}

	.heaeder image {
		width: 100%;
		height: 100%;
		display: block
	}

	.header_name {
		font-size: 32rpx;
		color: #000000;
		text-align: center
	}

	.tab_con view {
		font-size: 32rpx;
		color: #000000;
		line-height: 80rpx;
		margin: 0 65rpx;
		padding-bottom: 6rpx;
		margin-top: 50rpx;
	}

	.tab_con view.active {
		color: var(--primary);
		border-bottom: 6rpx solid var(--primary);
		padding-bottom: 0
	}

	.reg_main {
		padding: 56rpx 73rpx 0;
		display: block;
	}

	.reg_item {
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 50rpx;
		line-height: 95rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
		margin-bottom: 35rpx;
	}

	.reg_item input {
		height: 95rpx;
		line-height: 95rpx;
		padding: 0 17rpx;
	}

	.primary_orange {
		.send_btn {
			background-image: linear-gradient(24deg, rgb(253, 162, 0) 0%, rgb(255, 113, 0) 100%);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}
	}

	.primary_blue {
		.send_btn {
			background: var(--primary);
			font-size: 24rpx;
			color: #fff;
			line-height: 59rpx;
			height: 59rpx;
			padding: 0 20rpx;
			border-radius: 50rpx;
		}
	}

	.cold7 {
		color: #d7d7d7
	}

	.go_reg {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding-bottom: 50rpx
	}

	.go_reg navigator {
		color: var(--primary);
		display: inline;
	}
</style>